import {Allotment} from "allotment";
import 'allotment/dist/style.css';
import Header from "./components/Header.tsx";
import EditArea from "./components/EditArea.tsx";
import Setting from "./components/Setting/Setting.tsx";
import {MaterialWrapper} from "./components/MaterialWrapper";
import Preview from "./components/Preview";
import {useComponentsStore} from "./stores/components.tsx";

export default function ReactPlayground() {
    const mode = useComponentsStore((state) => state.mode)
    return <div className='h-[100vh] flex flex-col'>
        <div className='h-[60px] flex items-center border-b-[1px] border-[#000]'>
            <Header/>
        </div>
        {
            mode === 'edit' ? <Allotment>
                <Allotment.Pane preferredSize={360} maxSize={500} minSize={360}>
                    <MaterialWrapper/>
                </Allotment.Pane>
                <Allotment.Pane>
                    <EditArea/>
                </Allotment.Pane>
                <Allotment.Pane preferredSize={400} maxSize={2000} minSize={300} >
                    <Setting/>
                </Allotment.Pane>
            </Allotment> : <Preview/>
        }
    </div>
}

